<!--
 * @Author: wangding
 * @Date: 2020-11-04 18:16:13
 * @LastEditTime: 2020-11-09 13:52:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\overview-inverter.vue
-->
<template>
    <div class="insurancePay-container">
        <el-tabs v-model="activeName" >
            <el-tab-pane :label="$t('renew.buy')" name="1">
                <div v-if="!cannotBuy">
                    <span class="title">{{$t('renew.periodSelectLabel')}}:</span>
                    <ul class="payList">
                        <li v-for="(item,index) in amountList" :key="item.id" :class="activeClass == index?'active':''" @click="changeAmount(item,index)">
                            <div>
                                <span>{{item.year + $t('year')}}</span>
                                <span>{{item.price}}</span>
                            </div>
                        </li>
                    </ul>
                    <el-button type="primary" @click="payConfirm()">{{$t('renew.buyNow')}}</el-button>
                </div>
                <span class="title" v-if="cannotBuy">{{$t('renew.cannotBuy')}}</span>
            </el-tab-pane>
            <el-tab-pane :label="$t('renew.purchasedOrders')" name="2">
                <div class="search-box">
                    <div class="search-box-sub">
                        <span class="lable-text">{{$t('renew.buyTime')}}</span>
                        <el-date-picker
                            v-model="startTime"
                            type="date"
                            :placeholder="$t('index.startTime')"
                            value-format='yyyy-MM-dd'
                            :clearable='false'
                            :picker-options="pickerOptions">
                        </el-date-picker>
                        <span>-</span>
                        <el-date-picker
                            v-model="endTime"
                            type="date"
                            :placeholder="$t('index.endTime')"
                            value-format='yyyy-MM-dd'
                            :clearable='false'
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                    <div class="search-box-sub">
                        <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
                    </div>
                </div>
                <baseTable v-loading="loading" row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
                    <template #goodAttribute="{data}">
                    {{data.goodAttribute+$t('year')}}
                    </template>
                    <template #amount="{data}">
                    {{data.currency+data.amount}}
                    </template>
                </baseTable>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            cannotBuy:false,
            amountList:[],
            activeName:'1',
            activeClass:null,
            keepYear:'',
            amount:'',
            selRow:JSON.parse(this.returnSession('selRow')),
            startTime:'',
            endTime:'',
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('warrantyStatistics.inverterSn'),
                value: 'goodName'
            },{
                title: this.$t('pay.orderNumber'),
                value: 'tradeNo'
            },{
                title: this.$t('renew.buyTime'),
                value: 'payTime'
            },{
                title: this.$t('renew.period'),
                value: 'goodAttribute',
                slot:'goodAttribute'
            },{
                title: this.$t('pay.amountOfMoney'),
                value: 'amount',
                slot:'amount'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getAmount()
        this.initTable()
    },
    methods: {
        returnSession(val){
            return sessionStorage.getItem(val)
        },
        changeAmount(item,index){
            this.activeClass=index
            this.keepYear=item.year
            this.amount=item.price
        },
        async getAmount(){
            let res = await this.API.getAmount({
                goodName:this.selRow.inverterSn
            })
            if(res.success){
                this.amountList=res.object
            }else{
                this.$message.warning(this.$t('renew.cannotBuy'))
                this.cannotBuy=true
            }
            
        },
        async initTable(){
            this.loading = true
            let res = await this.API.getOrderpaypal({
                orderStatus:1,
                goodName:this.selRow.inverterSn,
                startTime:this.startTime,
                endTime:this.endTime,
                size: this.size,  
                current: this.current
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        async payConfirm(){
            if(this.keepYear!=''){
                let res = await this.API.checkCrmQuality({
                    goodName:this.selRow.inverterSn
                })
                if(res.success){
                    let payObj={
                            inverterSn:this.selRow.inverterSn,
                            keepYear:this.keepYear,
                            amount:this.amount
                    };
                    sessionStorage.setItem("payObj",JSON.stringify(payObj));
                    console.log(sessionStorage.getItem("payObj"));
                    this.$router.push({path:'/payConfirm',query:{}})
                }else{
                    this.$message.error(this.$t('renew.extendedWarranty'))
                }

            }else{
                this.$message.error(this.$t('renew.periodSelect'))
            }
        },
        uploadPage(){
            this.getSnGuideStepList()
        },
        query(){
            this.current = 1
            this.initTable()
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
    },
};
</script>

<style  lang="less" >
.insurancePay-container{
    height: calc(100% - 50px) ;
    font-size: 13px;
    .el-tabs--top{
        height: 100%;
    }
    .title{
        float: left;
        margin: 10px;
    }
    .payList{
        ul{
            display: inline-block;
        }
        li{
            display: inline-block;
            min-width: 120px;
            padding: 0 5px;
            text-align: center;
            &>div{
                position: relative;
                padding: 8px 10px;
                border: 1px solid #bfbfbf;
                cursor: pointer;
                box-sizing: border-box;
                span{
                    display: block;
                }
                &:hover{
                    position: relative;
                    border: 1px solid #f49d0c;
                }
            }
            &.active>div{
                position: relative;
                border: 1px solid #f49d0c;
            }
            &.active>div:before{
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                width: 19px;
                height: 18px;
                background: url('../../assets/img/pay/payment.png') no-repeat left -114px;
            }
        }
    }
}
</style>
